<template>
  <div id="home">
    <div class="content" style="width: 100%; height: 65vh">
      <div v-for="navs in navGroup" :key="navs.title">
        <van-divider>{{ navs.title }}</van-divider>
        <van-grid :column-num="4">
          <van-grid-item
            v-for="nav in navs.navs"
            :text="nav.name"
            :key="nav.name"
            :to="nav.to"
          >
            <template v-if="nav.hasOwnProperty('icon')" slot="icon">
              <icon-svg :icon-class="nav.icon" size="2rem" />
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <van-button round type="info" class="chooseline" @click="chooseLine"
      >重新选择生产线</van-button
    >
    <van-button type="warning" block class="logout" @click="handleLogout"
      >退出</van-button
    >
  </div>
</template>

<script>
import { Grid, GridItem, Divider } from "vant";
import { mapActions } from "vuex";
export default {
  name: "Home",
  components: {
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Divider.name]: Divider,
  },
  data() {
    return {
      subNavsVisible: false,
      subNavs: [],
      navGroup: [
        {
          title: "原料和包材",
          navs: [
            {
              name: "收货确认",
              icon: "yijinchang",
              to: "/receiptConfirmation",
            },
            { name: "产线退货", icon: "yichuchang", to: "/return" },
          ],
        },
        {
          title: "生产投料",
          navs: [
            /* {
              name: "膜卷领料",
              icon: "gongnengfengfu",
              to: "/feeding/rollreceipt",
            },
            { name: "膜卷投料", icon: "juanzhi", to: "/feeding/membraneRoll" }, */
            { name: "工单投料", icon: "yiguoqi", to: "/feeding/workOrder" },
            { name: "投料退回", icon: "ituihui", to: "/feeding/back" },
            { name: "查询信息", icon: "chaxun", to: "/feeding/searchdate" },
          ],
        },
        /* {
          title: "返工收货",
          navs: [
            {
              name: "返工收货",
              icon: "lijifangong",
              to: "/feeding/returnaccept",
            },
          ],
        }, */
      ],
    };
  },
  methods: {
    ...mapActions(["logout"]),
    handleSubNavs(children) {
      this.subNavs = children;
      this.subNavsVisible = true;
    },
    subNavSelected(action, index) {
      this.subNavsVisible = false;
      this.$router.push(this.subNavs[index].to);
    },
    handleLogout() {
      this.logout().then(() => {
        this.$router.push("/login");
      });
    },
    chooseLine() {
      this.$router.back();
    },
  },
  created() {
    this.$store.commit("SET_NAVIGATION", "操作选择");
  },
};
</script>

<style scoped lang="less">
#home {
  padding-top: 1vh;
  .content {
    overflow-y: auto;
    white-space: nowrap;
  }
  .chooseline {
    position: fixed;
    bottom: 6rem;
    width: 15rem;
    height: 3rem;
    left: 0;
    right: 0;
    margin: auto;
  }
  .logout {
    position: fixed;
    bottom: 0;
  }
}
</style>
